<template>
    <!-- html -->
    <div class="Hook">
        <h3>this is Hook.</h3>
        <h4>当前求和为：{{ sum }}</h4>>
        <h4>{{ sumAdd }}</h4>
        <button @click="add">添加值</button>
        <hr />
        <img v-for="(item, index) in dogList" :key="index" :src="item" />
        <hr />
        <button @click="getDog">再来一只小狗</button>
    </div>
</template>

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Hook'>
import useDog from '@/hooks/useDog'
import useSum from '@/hooks/useSum'

const { dogList, getDog } = useDog()
const { sum, add, sumAdd } = useSum()

</script>

<style scoped>
/* 样式 */
.Hook {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}

img {
    height: 100px;
}
</style>